<template>
  <div>
    <el-dialog
      v-if="showWin"
      v-dialogDrag="showWin"
      :title="formTitle"
      :close-on-click-modal="false"
      :visible.sync="showWin"
      width="50%">
      <el-form
        id="proForm"
        ref="proForm"
        :rules="rules"
        :model="form"
        label-width="auto">
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item
              label="归档标记 :"
              prop="archiveFlag">
              <el-input v-model="form.archiveFlag"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="产品规范码 :"
              prop="psrNum">
              <el-input
                v-model="form.psrNum"
                disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="叙述段落区分 :"
              prop="function">
              <el-input v-model="form.function"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="叙述行序 :"
              prop="lineSeq">
              <el-input v-model="form.lineSeq"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="叙述内容 :"
              prop="description">
              <el-input v-model="form.description"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="维护日期 :"
              prop="lastDate">
              <el-date-picker
                v-model="form.lastDate"
                :picker-options="pickerOptions"
                :popper-class="'currentDatePickerClass'"
                style="width: 100%;"
                type="date"
                align="right"
                value-format="yyyyMMdd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="维护者 :"
              prop="userId">
              <el-input v-model="form.userId"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer">
        <el-button @click="showWin = false">关 闭</el-button>
        <el-button
          v-oauth
          data-oauthUuid="1620438600000"
          type="primary"
          :loading="loading"
          @click="submit">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Api from '@/api/productSpecification'

  export default {
    data() {
      return {
        pickerOptions: {
          disabledDate: (time) => {
            const timeNow = new Date()
            return time.getTime() < (timeNow.getTime() - 86400000)
          }
        },
        showWin: false,
        formTitle: '创建',
        form: {
          archive_flag: ''
        },
        rules: {
          linkAddress: [
            { required: true, message: '请输入联系地址', trigger: 'blur' }
          ],
          declarerUnit: [
            { required: true, message: '请输入用户单位', trigger: 'blur' }
          ],
          declarer: [
            { required: true, message: '请输入用户姓名', trigger: 'blur' }
          ],
          systemName: [
            { required: true, message: '请选择运维系统', trigger: 'blur' }
          ],
          faultPhenomenon: [
            { required: true, message: '请输入故障现象', trigger: 'blur' }
          ],
          area: [
            { required: true, message: '请选择区域', trigger: 'change' }
          ],
          faultType: [
            { required: true, message: '请选择故障类型', trigger: 'change' }
          ],
          eventLevel: [
            { required: true, message: '请选择事件等级', trigger: 'change' }
          ],
          eventType: [
            { required: true, message: '请选择事件类型', trigger: 'change' }
          ],
          receiverUnit: [
            { required: true, message: '请选择接收班组', trigger: 'change' }
          ],
          receiver: [
            { required: true, message: '请选择接收人', trigger: 'change' }
          ]
        },
        loading: false
      }
    },
    methods: {
      show(currentRow, data) {
        if (data) {
          this.form = data
          this.formTitle = '修改'
        } else {
          this.form = {
            archiveFlag: '',
            psrNum: currentRow.psrNum,
            function: '',
            lineSeq: '',
            description: '',
            lastDate: '',
            userId: ''
          }
          this.formTitle = '创建'
        }
        this.showWin = true
      },
      closeWin() {
        this.showWin = false
      },
      submit() {
        if (this.formTitle === '创建') {
          Api.createDesc(this.form).then(data => {
            this.$message({
              type: 'success',
              message: '新增产品规范标准信息成功!'
            })
            this.$emit('appendData', 'refreshChild')
            this.closeWin()
          }, () => {

          })
        } else {
          Api.modifyDesc(this.form).then(data => {
            this.$message({
              type: 'success',
              message: '修改产品规范标准信息成功!'
            })
            this.$emit('appendData', 'refreshChild')
            this.closeWin()
          })
        }
      }
    }

  }
</script>

<style lang="scss" scoped>
  /deep/.el-date-editor--datetimerange.el-input__inner{
    width: 100%;
  }
  .currentDatePickerClass > .el-picker-panel__footer > .el-button--text :first-child{
    display: none;
  }
</style>
